import React, { Component } from 'react'
import { DatePicker,Input,Icon  } from 'antd';
import {Lunbo} from '../../components'
import './index.scss'
export default class index extends Component {
    constructor(){
        super()
        this.state={
            onOff:false,
            timer:'',
            Index:0,
            Image:[],
            Special:[],
            Category:[],
            Pink:[],
            keygen:true,
            url:'//a.vpimg4.com/upload/dop/2020/01/06/39/1920-442.jpg',
            Beijing:[],
            sex:'',
            sexname:['小王子','小公主','未知']
        }
    }
    setTimeouthandel=()=>{
        this.timer=setTimeout(()=>{
            this.IndexChang()
            this.getImage()
        },4000)
    }
    handleMouseEnter=()=>{   
        clearInterval(this.timer)
        this.setState({
            keygen:false
        })
    }
    handleMouseLeave=()=>{
        this.setState({
            keygen:true
        })
        this.getImage()
      
    }
    render() {
        const {url,Beijing} =this.state
        return (
            
            <div className="baby">
                {/* 轮播横幅广告 */}
                <Lunbo url={url} Beijing={Beijing}></Lunbo>
                {/* 功能区 */}
                <div className="body_fuction clearfix">
                    {/* 宝宝信息区 */}
                    <div className="baby-cardindex">
                        <div className="baby-card fl">
                            <div className="baby-card-create">
                                <h4 className="baby-creat-hd">建立宝宝档案</h4>
                                <form className="baby_form">
                                    <div className="baby_time">
                                        <DatePicker onChange={onChange} placeholder="宝宝生日/预产期" />
                                    </div>
                                    <div className="baby_name">
                                        <Input placeholder="宝宝昵称" />
                                        <i className="iu"></i>
                                    </div>
                                    <div className="baby_item">
                                        {
                                            this.state.sexname.map((item,index)=>{
                                            return <span onClick={this.handleSex.bind(this,index)} className={index===this.state.sex?'selected':'span1'} key={index}>{item}</span>
                                            })
                                        }
                                        {/* <span className="span1 selected">小王子</span>
                                        <span className="span1">小公主</span>
                                        <span className="span1">未知</span> */}
                                    </div>
                                    <a href="###" className="ui-btn">
                                        <i className="face"></i>
                                        立即加入 尊享宝宝权益
                                    </a>
                                    <p className="bcc">
                                        <span className="bcc_i">2,879,589&nbsp;</span>
                                        位爸妈已加入
                                    </p>
                                </form>
                            </div>
                        </div>
                    </div>
                    {/* 图片广告模块 */}
                    <div className="c-kid-ad-wrap">
                        {
                            this.state.Image.map(img=>{
                                return  <div className="c-kid-ad-pic-item" key={img.id}>
                                    <a href="###"><img src={img.img} alt=""/></a>
                                </div>
                            })
                        }
                    </div>
                </div>
                {/* 精选分类 */}
                <div className="baby-cat-wrap">
                    <div className="cat-title" ></div>
                    <div className="cat-list"
                     onMouseEnter={this.handleMouseEnter}
                     onMouseLeave={this.handleMouseLeave}
                    >
                    <ul className="cat-nav">
                        {
                            this.state.Pink.map((item,index)=>{
                                return <li onClick={this.handleClick.bind(this,index)} data={item.id}  key={item.id} className={item.id===this.state.Index?'pink':"cat-nav-item"}>
                                    
                                <a href="###">
                                    <p className="cat-title-a">{item.name}</p>
                                    <span className="cat-title-en">{item.it}</span>
                                </a>
                            </li>
                            })
                        }
                        </ul>
                        <div className="cat-content">
                            {
                                this.state.Category.map(item=>{
                                    return <div className="cat-content-item" key={item.id}>
                                    <a href="###">
                                        <i className="cat_name">{item.name}</i>
                                        <img src={item.img} alt=""/>
                                    </a>
                                </div>
                                })
                            }
                        </div>
                    </div>
                </div>
                {/* 每日上新 */}
                <div className="floor-brand">
                    <div className="shop-title">
                       <img src="//a.vpimg2.com/upload/dop/2017/01/05/118/today_zhie_dfyu.png" alt="" className="countdown-img"/> 
                    </div>
                    <div className="brand-wrap clearfix">
                        <div className="brand-item-page clearfix">
                            {
                                this.state.Special.map(item=>{
                                    return <div className="brand-item"  key={item.id}>
                                    <a href="###">
                                        <img src={item.img} alt=""/>
                                        <div className="brand-info clearfix">
                                        <span className="brand-name">{item.name}</span>
                                            <div className="pms">
                                                <span className="brand-discount">
                                                <span className="salebg2">{item.num}</span>
                                                    折起
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                    <span className="ui-btn-fav">
                                        <span className="ui-like">
                                            <i className="vipfont"><Icon type="heart" /></i>
                                            <span className="fav-hidden">收藏品牌</span>
                                        </span>
                                    </span>
                                </div>
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    handleSex=(e)=>{
        this.setState({
            sex:e
        })
    }
    handleClick=(e)=>{
        this.setState({
            Index:e
        })
        this.getImage()
    }
    IndexChang(){
        if(this.state.Index >= 7){
            this.setState({
                Index:0
            })
        }else{
            this.setState({
                Index:this.state.Index+1
            })
        }
    }
    componentDidMount(){
        this.getImage()
    }
   
    getImage=async()=>{
        try{
            const res =await this.$axios.get(' http://localhost:5000/baby')
            this.setState({
                Pink:res.data[3].fenlei,
                Image:res.data[0].guanggao,
                Special:res.data[1].xinpin,
                Category:res.data[2].lunbo[this.state.Index].more,
                Beijing:res.data[4].beijing
            })
            if(this.state.keygen===true){
                this.setTimeouthandel()
            }else{
                return
            }
        } catch(error){
            console.log("ss")
        }
    }
    
}
function onChange(date, dateString) {
    console.log(date, dateString);
  }